// 需求一：  获取文章列表数据 并渲染 
//  注意： 默认情况下 自己账号的是获取的数据是空数据    需要先登录到线上的地址 用自己的账号发布几篇文章 






// 定义美化时间的过滤器   格式化时间 
// template.defaults.imports  固定的写法   
// 他就是挂载过滤器处理函数的  
// 过滤器的调用方式和函数的调用方式 不太一样  
// 过滤器管道符前面的数据  就是过滤器的第一个实参
template.defaults.imports.dataFormat = function(date) {
  const dt = new Date(date)


  var y = dt.getFullYear()
  var m = padZero(dt.getMonth() + 1)
  var d = padZero(dt.getDate())

  var hh = padZero(dt.getHours())
  var mm = padZero(dt.getMinutes())
  var ss = padZero(dt.getSeconds())

  return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
}

// 定义补零的函数
function padZero(n) {
  return n > 9 ? n : '0' + n
}



// 1.1 先定义一个全局参数 方便后期修改使用
let  q = {
  // 键 就是接口文档 要求的字段
  // 当前页码数
  pagenum: 1,
  // 当前页需要的数据条数
  pagesize: 2 ,
  // cate_id 文章分类id
  cate_id:"",
  // 文章状态(可选值"已发布"或"草稿")
  state:"",
}

// 1.2 定义一个函数 用来发送数据请求  
initTable()  

function initTable()  {
   $.ajax({
    url:"/my/article/list",
    // 变量的查找机制 当前作用域没有  上一级 ==》 全局  
    data: q,
    success: res =>{
      // 1.2.1 默认获取的是当前账号下面的数据   所以用自己的账号一定 要先发布    xfa7   xfa7xfa7  
      console.log(res)
      // 1.3 使用模板引擎渲染数据   
      // 1.3.1 先导入 模板引擎   
      // 1.3.2 定义模板 
      // 1.3.2 调用template  
      if(res.status != 0) return  layer.msg(res.message)

      // 1.4 给res 添加一个函数属性  只有是res 上面的属性才能在模板上面使用 
     
     // 定义补零的函数


      res.fn = function(date) {

        const dt = new Date(date)

        var y = dt.getFullYear()
        var m = padZero(dt.getMonth() + 1)
        var d = padZero(dt.getDate())
      
        var hh = padZero(dt.getHours())
        var mm = padZero(dt.getMinutes())
        var ss = padZero(dt.getSeconds())
      
        return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
      }


      console.log(res)

      // 定义补零的函数
      function padZero(n) {
        return n > 9 ? n : '0' + n
      }

      let str = template('tpl-list',  res)
      $('tbody').html(str)
      // 4.2 这里调用渲染分页  res.total 实参 
      renderPage (  res.total )
    }
   })
}


// 需求二： 页面加载 就渲染下拉框的分类 

initCate()

// 初始化文章分类的方法
function initCate() {
  $.ajax({
    method: 'GET',
    url: '/my/article/cates',
    success: function(res) {
      if (res.status !== 0)  return layer.msg('获取分类数据失败！')

      // 2.1 拿到后台的数据  渲染页面 
      console.log(res)
      let str = template('tpl-select', res )
      // 2.2 layui 有问题 这样直接赋值的有问题
      $(`[name="cate_id"]`).html(str)

      let {form} = layui
      // 2.3 这个是让form 表单重新渲染 
      form.render(); //更新全部


    }
  })
}

// 需求三： 实现文章的筛选
$('#form-search').submit(function(){
  // 3.1 需要先拿到 分类的id 
  // 3.1.1 jq 通过select 的 val方法 可以取到选中的option的 value属性值 如果value没有属性值 拿到的 option的内容
  // console.log($(`[name="cate_id"]`).val())
  // console.log($(`[name="state"]`).val())
  // 3.2  也可以通过 form.val()
  let {form} = layui
  console.log(form.val('selectForm'))
  // 3.2.1 给每个下拉框添加要给value属性 
  let query = form.val('selectForm')


  // 3.3 把q的参数展开到一个新对象 把 query的对象也展开到新对象
  // 3.3.1 只要不是声明在函数里面 和代码块里面的变量都是全局变量
  q = {...q, ...query};
 console.log(q)

 

 // 3.3 重新渲染
 initTable() 

  return false 
})



// 4 分页 
// 4.1 一个函数一个功能 建议在写个函数 来处理分页相关的问题 


  function renderPage (count) {
    let  {laypage} =  layui


    //执行一个laypage实例
    laypage.render({
      elem: 'pageBox' , //注意，这里的 pageBox 是 ID，不用加 # 号
      // 对象的属性和属性值 一样 可以简写 
      // count: count ,//数据总数，从服务端得到
      count ,//数据总数，从服务端得到
      limit: 2
    });
  
  }